<template>
  <h-container>
    <div class="alert alert-danger">
      注意：本页面只显示暂时缺少的商品。<span class="i-info">如果有未申请退款的订单将能看到退款申请按钮，申请退款后将会退回当前所有缺货商品的价钱。</span>
    </div>

    <div class="h-toolbar">
      <div class="inline-item">
        <div class="label inline">
          订单时间:
        </div>
        <h-date-range-picker v-model="search.orderDate"/>
        <el-button type="primary" @click="searchData"><i class="fa fa-search"></i> 查询</el-button>
      </div>
      <div class="inline-item">
        <div class="label inline">
          退款状态:
        </div>
        <div class="inline">
          <el-radio-group v-model="search.refund" @change="refundChange">
            <el-radio :label="0" title="全部"> 未申请退款</el-radio>
            <el-radio :label="1">已申请退款</el-radio>
            <el-radio :label="2">已完成退款</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <div>
      <el-table
        :data="orders"
        border
        tooltip-effect="dark"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="table"
      >

        <el-table-column
          type="selection"
          width="48"
          :selectable="selectable"
        >
        </el-table-column>

        <el-table-column
          label="订单编号" width="120"
        >
          <template slot-scope="scope">{{ scope.row.sn }}</template>
        </el-table-column>
        <el-table-column
          label="商品信息" width="110">
          <template slot-scope="scope">
            <h-good-info-display v-model="scope.row" :displayInfo="false"></h-good-info-display>
          </template>
        </el-table-column>
        <el-table-column label="商品规格" min-width="100">
          <template slot-scope="scope">
            <h-specs-display v-model="scope.row"></h-specs-display>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="160" prop="createTime">
        </el-table-column>
        <el-table-column label="订单信息" min-width="200">
          <template slot-scope="scope">
            <h-order-info-display v-model="scope.row" :createTime="false"></h-order-info-display>
          </template>
        </el-table-column>


        <el-table-column
          label="订单金额"
          min-width="150">
          <template slot-scope="scope">
            <h-order-pay-info-display v-model="scope.row"/>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="120">
          <template slot-scope="scope">
            <h-order-status-display v-model="scope.row" :refund="true" :arrival="true"
                                    :pay="true"></h-order-status-display>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pay==1 && scope.row.arrival==0 &&scope.row.refund==0" type="text"
                       @click="doRefound(scope.$index,scope.row)">
              申请退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="row">
        <div class="col h-pagination">
          <div v-if="showBatch" style="float: left;margin-left: 5px;">
            <el-button type="primary" @click="batchRefound"> 批量申请退款</el-button>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="search.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="search.pagination.total" class="float-right">
          </el-pagination>
        </div>
      </div>
    </div>
    <h-return-dialog v-model="refunds" :show.sync="showReturnDialog" title="退款申请"/>
  </h-container>
</template>
<script>
  import HContainer from 'src/components/shop/layout/Container'
  import HDateRangePicker from 'src/components/common/HDateRangePicker'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'
  import HReturnDialog from 'src/components/shop/common/HReturnDialog'

  export default {
    name: 'HLack',
    components: {
      HContainer, HDateRangePicker, HOrderStatusDisplay, HGoodInfoDisplay, HReturnDialog
      , HSpecsDisplay, HOrderInfoDisplay, HOrderPayInfoDisplay
    },
    computed: {
      showBatch: function () {
        return this.orders.length > 0
      }
    },
    data() {
      return {
        search: {
          orderDate: [],
          status: 1,
          arrival: 0,
          refund: 0,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          orderBy: 'id desc'
        },
        loading: false,
        showReturnDialog: false,
        selectOrders: [],
        orders: [],
        refunds: []
      }
    },
    methods: {
      handleSelectionChange: function (v) {
        this.selectOrders = v
      },
      refundChange: function (v) {
        if (v == 0) {
          this.search.refund = 0
        } else if (v == 1) {
          this.search.refund = 1
        } else {
          this.search.refund = 2
        }
        this.searchData()
      },
      selectable: function (index, data) {
        if (data.refund == 0 && data.pay == 1) {
          return false
        } else {
          return true
        }
      },
      doRefound: function (index, data) {
        this.refunds = [data]
        this.showReturnDialog = true
      },
      batchRefound: function () {
        this.refunds = this.selectOrders
        this.showReturnDialog = true
      },
      handleSizeChange: function (size) {
        this.search.pagination.limit = size
        this.getData()
      },
      handleCurrentChange: function (page) {
        this.search.pagination.page = page
        this.getData()
      },
      getDatas: function () {
        const me = this
        me.loading = true
        FrontService.orderSearch(me.search).then(ds => {
          if (ds != null) {
            me.orders = ds.datas
            me.search.pagination = ds.pagination
          }
          me.loading = false
        })

      },
      searchData: function () {
        this.search.pagination.page = 1
        this.getDatas()
      }
    },
    beforeMount: function () {
      this.getDatas()
    }
  }
</script>
